<template>
    <div class="kada_box ">
        <!-- 大背景图 -->
        <div class="imgBg">
            <Top :type="type"></Top>
            <div class="conter bottomPage">
                <el-row style="width: 100%;">
                    <el-col :span="3" class="b_left">
                        <div class="  pubBg">
                            <!-- 环境参数 -->
                            <div class="environment">
                                <!-- 环境参数 -->
                                <div class="b_title">
                                    环境参数
                                </div>
                                <ul >
                                    <li v-for="(item, index) in bottomList" :key="index">
                                        <div class="tops">
                                            <span></span>
                                            {{ item.name }}
                                        </div>
                                        <div class="bottms">
                                            {{ item.value }} <span class="sp2" v-if="item.m">{{ item.m }}</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="15" class="b_con">
                        <div class="pubBg">
                            <!-- 探头 -->
                            <div class="probe">
                                <ul  > 
                                    <li v-for="(item, index) in bottomData" :key="index">
                                        <div class="sanTitle">
                                            <span></span>
                                            {{ index + 1 }}探头
                                        </div>
                                        <div class="pro_box pubBorder">
                                            <span class="sp1"></span>
                                            <span class="sp2"></span>
                                            <span class="sp3"></span>
                                            <span class="sp4"></span>
                                            <div class="cons imgTantou">
                                                <img class="a1" v-show="bottonDataCopy[index] === item.url || bottonDataCopy[index] === ''"  :src="item.url"  @load="imgOnError(index,item.url)" alt="">
                                                <img class="a2" v-show="bottonDataCopy[index] !== item.url && bottonDataCopy[index] !== ''" :src="bottonDataCopy[index]"  @load="imgOnError(index,item.url)" alt="">                                                                                          
                                            </div>
                                        </div>
                                        <div class="status_li"> 
                                                <div class="pub">
                                                    <div class="status_f">
                                                        <div class="ones">
                                                            <img src="@/assets/img/ic_she@2x.png" alt="">
                                                            <div>
                                                                <h3 class="biao" > {{ item.serverName }} </h3>
                                                                <p>设备名称</p>
                                                            </div>
                                                        </div>
                                                        <div class="ones">
                                                            <img v-if="item.serverName" src="@/assets/img/ic_lian@2x.png" alt="">
                                                            <img v-else src="@/assets/img/ic_lian_dis@2x.png" alt="">
                                                            <div>
                                                                <h3>
                                                                    <span class="sp1" v-if="item.serverName">正常</span>
                                                                    <span class="sp2" v-else>离线</span>
                                                                </h3>
                                                                <p>链接状态</p>
                                                            </div>
                                                        </div>
                                                        <div class="ones">
                                                            <img v-if="item.serverName" src="@/assets/img/ic_zhuang@2x.png" alt="">
                                                            <img v-else src="@/assets/img/ic_zhuang_dis@2x.png" alt="">
                                                            <div>
                                                                <h3>
                                                                    <span class="sp1" v-if="item.serverName">正常</span>
                                                                    <span class="sp2" v-else>未工作</span>
                                                                </h3>
                                                                <p>设备状态</p>
                                                            </div>
                                                        </div> 
                                                    </div> 
                                                </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="5.5" class="b_right">
                        <div class="pubBg">
                            <div class="titles1">
                                12小时温度变化曲线 (℃)
                            </div>
                            <!-- 探头1 -->
                            <div class="pro_box">
                                <div class="pro_li" v-for="(item, index) in listData.list" :key="index">
                                    <div class="pro_title">
                                        <div class="sanTitle">
                                            <span></span>
                                            {{ item.name }}
                                        </div>
                                        <div class="pro_color" v-if="index == 0">
                                            <ul>
                                                <li v-for="(a, indexa) in colors.color" :key="indexa">
                                                    <span :style="{ background: a.color }"></span>
                                                    {{ a.name }}
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- 折线图 -->
                                    <LineChart v-if="bottomData" :index="index"></LineChart>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Top from '@/components/layout/top.vue'
import LineChart from './common/lineChart.vue'
import { ref, reactive,onMounted,onUnmounted } from 'vue'
import { storeToRefs } from 'pinia'
import useMainStore from '@/store/main/main'
const systemStore = useMainStore()
// systemStore.getBottomData() 
const { bottomData, bottomList } = storeToRefs(systemStore) 
console.log(bottomData.value,'---------------fffffffffbottomData');
let bottonDataCopy = ref(['','',''])
 
const type = ref(2)
const colorsData = {
    color: [
        { name: '最高温', color: '#EB3A3C' },
        { name: '最低温', color: '#2F9DF1' },
        { name: '平均温', color: '#E9BC21' },
    ]
}
// // 约束
interface colorsArray {
    color: colorsObject[]
}

interface colorsObject {
    name: string
    color: string
}
const colors = reactive<colorsArray>(colorsData)

const listData = {
    list: [
        { name: '1#探头' },
        { name: '2#探头' },
        { name: '3#探头' },
    ]
}  
// 图片优化
function imgOnError(index, url) {
    console.log(url,bottonDataCopy.value[index],'bottonDataCopy.value[index]');
    bottonDataCopy.value[index] = url
    
}
// 图片刷新 
function  refreshImageUrl(){ 
    if (bottomData.value.length > 0) {  
        systemStore.setUrl()
    }
}
let intervalId = ref(null)
onMounted(() => { 
    intervalId = setInterval(refreshImageUrl, 1000)
    // 清理定时器
})
onUnmounted(() => {
    clearInterval(intervalId);
})

</script>